<template>
  <div class="songlist">
    <div class="songlist-top">
      <h3>{{title}}</h3>
    </div>
    <SongList :list="list"></SongList>
  </div>
</template>

<script>
import SongList from '../SongList.vue'
export default {
  name: 'Songlist',
  data () {
    return {
    }
  },
  components: {
    SongList
  },
  props: {
    list: {
      type: Array,
      default: () => [],
      required: true
    },
    title: {
      type: String,
      default: '',
      required: true
    }
  },
  methods: {
  }
}
</script>

<style scoped lang='scss'>
  @import "./../../assets/css/variable.scss";
  @import './../../assets/css/mixin.scss';
  .songlist{
    .songlist-top{
      width: 100%;
      height: 84px;
      line-height: 84px;
      @include bg_sub_color();
      padding: 0 20px;
      h3{
        @include font_size($font_large);
        font-weight: bold;
        @include font_color();
      }
    }
  }
</style>
